{extend name="public/layerbase" /}
{block name="css"}
    <link rel="stylesheet" href="__STATIC__/admin/assets/css/dropzone.css" />
    <link rel="stylesheet" href="__STATIC__/admin/assets/css/ace.css" class="ace-main-stylesheet" id="main-ace-style" />
<style>
    #apply-form{width:446px;height:60px;}
    .tishi{float:left;width:250px;height:40px;}
    .btnbox{float:right;}
    .fallback{width: 136px;  height: 40px;  background: #4f99c6;  position:relative;text-align: center;line-height:40px;
        float: left;}
    .chuanfile{font-size:20px;color:white;}
    #excel{width: 50px !important;height:40px; cursor: pointer;  font-size: 30px;  outline: medium none;  filter:alpha(opacity=0);  -moz-opacity:0;  opacity:0;position: absolute;top:0;}
    #btnRegister{width:60px;height: 40px;border:0px;font-size:20px;color:white;float:right;background:#ffb752 ;}
</style>

{/block}

{block name="content"}
<!-- /section:basics/navbar.layout -->
<div class="main-container" id="main-container">


    <!-- /section:basics/sidebar -->
    <div class="main-content">

        <div class="page-content">
            <!-- /section:settings.box -->
            <div class="page-content-area">
                <div class="page-header">
                    <h1>
                        导入客资
                    </h1>
                </div><!-- /.page-header -->

                <div class="row">
                    <div class="col-xs-12">
                        <!-- PAGE CONTENT BEGINS -->
                        <div>
                            <form action="{:url('daoru')}" method="post" enctype="multipart/form-data"  id="apply-form">
                                <input type="text" placeholder="请上传文件" class="tishi" id="tishi">
                                <div class="btnbox">
                                    <div class="fallback">
                                        <label class="chuanfile">上传文件</label>
                                        <input name="excel" type="file" id="excel" multiple="" onchange="handleFile()" />
                                    </div>
                                    <button type="submit" id="btnRegister">提交</button>
                                </div>
                            </form>
                        </div><!-- PAGE CONTENT ENDS -->
                    </div><!-- /.col -->
                </div><!-- /.row -->
                <br>
                <table class="row" border="0">
                    <thead>
                    <tr>
                        <th class="col-xs-3">顾客姓名</th>
                        <th class="col-xs-3">主电话</th>
                        <th class="col-xs-3">副电话</th>
                        <th class="col-xs-3">错误信息</th>
                    </tr>
                    </thead>
                    <tbody>
                    {empty  name="info" }
                    <tr>
                        <td colspan="4" align="center">{$text}</td>
                    </tr>
                    {else /}
                    {volist name="info" id="vo"}
                    <tr>
                        <td class="col-xs-3">{$vo.name_z}</td>
                        <td class="col-xs-3">{$vo.phone_z}</td>
                        <td class="col-xs-3">{$vo.phone_f}</td>
                        <td class="col-xs-3" style="color: red;">{$vo.errorinfo}</td>
                    </tr>
                    {/volist}
                    {/empty}
                    </tbody>
                </table>

            </div><!-- /.page-content-area -->
        </div><!-- /.page-content -->
    </div><!-- /.main-content -->



</div>

{/block}

{block name="js"}

<script src="__STATIC__/admin/assets/js/dropzone.js"></script>
<script src="__STATIC__/admin/assets/js/ace/ace.js"></script>

<script type="text/javascript">

    var define_fileds = '';

//    var excel = document.getElementById('excel');
//
//    var bbb = excel.value();
//    console.log(excel.value);
//    console.log(bbb);
//    console.log($('#excel').val());

    var excel = document.getElementById("excel");
    var tishi = document.getElementById("tishi");
    function handleFile(){
        fileval = excel.value;
        tishi.value = fileval.slice(12);
    }

    jQuery(function($){

        Dropzone.autoDiscover = false;
        try {
            var myDropzone = new Dropzone("#dropzone" , {
                url:"{:url('daoru')}",

                paramName: "file", // The name that will be used to transfer the file
                maxFilesize: 0.5, // MB

                addRemoveLinks : true,
                dictDefaultMessage :
                    '<span class="bigger-150 bolder"><i class="ace-icon fa fa-caret-right red"></i> 从电脑上拖拽文件到这里</span>  \
                    <span class="smaller-80 grey">(或者点击这里上传文件)</span> <br /> \
                    <i class="upload-icon ace-icon fa fa-cloud-upload blue fa-3x"></i>'
                ,
                dictResponseError: '上传错误!',

                //change the previewTemplate to use Bootstrap progress bars
                previewTemplate: "<div class=\"dz-preview dz-file-preview\">\n  <div class=\"dz-details\">\n    <div class=\"dz-filename\"><span data-dz-name></span></div>\n    <div class=\"dz-size\" data-dz-size></div>\n    <img data-dz-thumbnail />\n  </div>\n  <div class=\"progress progress-small progress-striped active\"><div class=\"progress-bar progress-bar-success\" data-dz-uploadprogress></div></div>\n  <div class=\"dz-success-mark\"><span></span></div>\n  <div class=\"dz-error-mark\"><span></span></div>\n  <div class=\"dz-error-message\"><span data-dz-errormessage></span></div>\n</div>",


//                init: function() {
//                    this.on("success", function(file) {
////                        layer.msg(file);
//
//                        console.log("File " + file.name + "uploaded");
//                    });
//                    this.on("removedfile", function(file) {
//                        console.log("File " + file.name + "removed");
//                    });
//                },
            });

            myDropzone.on("selectedfiles", function(files) {
                myDropzone.removeAllFiles();
            });
            myDropzone.on("addedfile", function(file) {
                $('#imgNoPhoto').hide(); // hide the default no-imge img
            });

            $('#btnRegister').click(function(){
                $('#apply-form').submit();
                return false;
            });

//            myDropzone.on("addedfile", function(file) {
//            });
//            myDropzone.on("sending", function(file) {
//                console.log(file);
//            });
        } catch(e) {
//            alert('请升级浏览器版本!');
        }

    });
</script>

{/block}